<template>
  <div>
    <BreadCrumb first="系统设置" second="组织机构"></BreadCrumb>
    <el-row>
      <el-form class="demo-form-inline" label-width="80px">
        <el-col :span="8">
          <el-form-item label="名称">
            <el-input placeholder="请输入公司名称" v-model="componyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址">
            <el-select v-model="selected" placeholder="选择地址">
              <el-option v-for="(item,index) in formInline" :value="item.id" :label="item.type" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="queryList(componyName)"><i class="fa fa-search" aria-hidden="true"></i> 查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div style="text-align: left">
      <el-button-group>
        <el-button type="primary" style="width: 100px" icon="el-icon-plus" @click="dialog1.dialogFormVisible=true">添加
        </el-button>
        <el-button type="warning" style="width: 100px" icon="el-icon-edit" @click=" updateTableDate">修改</el-button>
        <el-button type="danger" style="width: 100px" icon="el-icon-delete" @click="deleteTableData">删除</el-button>
      </el-button-group>
    </div>
    <div id="showTable">
      <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="dept_name"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="superior"
          label="上级单位"
          width="180">
        </el-table-column>
        <el-table-column
          prop="dept_count"
          label="定编">
          <template slot-scope="scope">
            {{scope.row.dept_count|changePeople}}
          </template>
        </el-table-column>
        <el-table-column
          prop="dept_address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="isUsed"
          label="是否启用">
          <template slot-scope="scope">
            <i class="fa" :class="scope.row.isUsed|changeBoolTag"></i>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button-group>
              <el-button type="warning" style="width: 60px" size="small">修改</el-button>
              <el-button type="danger"style="width: 60px" size="small">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; text-align :left">
        <el-button @click="toggleSelection(list)" size="mini">全选</el-button>
        <el-button @click="toggleSelection()" size="mini">取消选择</el-button>
      </div>
      <el-pagination
        background
        :current-page="currpage"
        layout="prev, pager, next, sizes, total, jumper"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        :total="list.length"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="修改组织" :visible.sync="dialog2.dialogFormVisible">

      <div slot="footer" class="dialog-footer">
        <el-form ref="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="dialog2.organ.name"></el-input>
          </el-form-item>
          <el-form-item label="上级名称">
            <el-input v-model="dialog2.organ.manage "></el-input>
          </el-form-item>
          <el-form-item label="定编">
            <el-input v-model=" dialog2.organ.peopleCount"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-select v-model="dialog2.organ.selected" placeholder="选择地址" style="width: 100%;">
              <el-option v-for="(item,index) in formInline" :value="item.id" :label="item.type" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model=" dialog2.organ.usable"></el-switch>
          </el-form-item>
          <el-button @click="dialog2.dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click=" confirmUpdate">确 定</el-button>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog title="添加组织" :visible.sync="dialog1.dialogFormVisible">
      <div slot="footer" class="dialog-footer">
        <el-form ref="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="dialog1.organ.name"></el-input>
          </el-form-item>
          <el-form-item label="上级名称">
            <el-input v-model="dialog1.organ.manage "></el-input>
          </el-form-item>
          <el-form-item label="定编">
            <el-input v-model=" dialog1.organ.peopleCount"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-select v-model="dialog1.organ.selected" placeholder="选择地址" style="width: 100%;">
              <el-option v-for="(item,index) in formInline" :value="item.id" :label="item.type" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model=" dialog1.organ.usable"></el-switch>
          </el-form-item>
          <el-button @click="dialog1.dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click=" insertHandle">确 定</el-button>
        </el-form>
      </div>
    </el-dialog>
  </div>


</template>

<script>
  import BreadCrumb from '../../components/ Breadcrumb/indexBreadcrumd'

  export default {
    name: "organization",
    components: {
      BreadCrumb
    },
    data: function () {
      return {
        dialog1:{
          dialogFormVisible:false,
          organ:{
            selected:'',
            name:'',
            manage: '',
            peopleCount: '',
            address: '',
            usable: ''
          }
        },
        dialog2:{
          dialogFormVisible:false,
          organ:{
            selected:'',
            name: '',
            manage: '',
            peopleCount: '',
            address: '',
            usable: '',
          }
        },
        componyName:'',
        list: [],
        formInline: [],
        selected:'',
        selected1: '',
        pagesize: 5,
        currpage: 1,
        multipleSelection: [],
        dialogFormVisible: false
      }
    }, mounted() {
      this.loadList();
      this.queryList();

    }, methods: {
      loadList:function(){
        let _this = this;
        this.axios({
          url: 'http://localhost:3000/api/organ/organ',
          method:'get'
        }).then(function (res) {
          _this.list = res.data.data;
        })
      },
      insertHandle:function(){
        let _this = this;
        if(this.dialog1.organ.usable==true){
          this.dialog1.organ.usable=1;
        }else {
          this.dialog1.organ.usable=0;
        }
        this.axios({
          url:'http://localhost:3000/api/organ/add',
          method:'get',
          params:{
            dept_name:_this.dialog1.organ.name,
            dept_count:_this.dialog1.organ.peopleCount,
            superior:_this.dialog1.organ.manage,
            isUsed:_this.dialog1.organ.usable,
            dept_address:_this.formInline[_this.dialog1.organ.selected-1].type
          }
        }).then(function (res) {
             _this.loadList();
        });
        this.dialog1.dialogFormVisible=false;
       /* const selected=[
          {
            id: 1,
            type: '天津市'
          },
          {
            id: 2,
            type: '北京市'
          },
          {
            id: 3,
            type: '上海市'
          }
        ]
        var _this=this;
        this.dialog1.organ.address=this.formInline.filter(function (item) {
          return item.id==_this.dialog1.organ.selected;
        })[0];
          this.list.unshift(this.dialog1.organ);
          this.dialog1.dialogFormVisible=false;*/


      },
      queryList:function( ){

        let _this = this;
        this.axios({
          url: '/mock/organ/provinces',
          method: 'get'
        }).then(function (res) {
          _this.formInline = res.data;
          let _this1 = _this;
          if(_this1.selected){
            _this1.axios({
              url:'http://localhost:3000/api/organ/select',
              method:'get',
              params:{
                dept_name:_this1.componyName,
                dept_address:_this1.formInline[_this1.selected-1].type
              }
            }).then(function (res) {
              _this1.list=res.data.data;
            })
          }
         /* if(componyName){
            console.log(componyName)
            _this.list=_this.list.filter(function (item) {
              return item.name.includes(componyName)&&
                 item.address.id==_this.selected;
            });

          }*//*
            _this.list = _this.list.filter(function (item) {
              var address1 = _this.formInline[_this.selected - 1].address;
              return item.address == address1;


            });*/


        })
      },
        handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;

      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      deleteTableData: function () {
        var selected = this.multipleSelection;
        var _this = this;
        selected.forEach(function (item1, index, array) {
          _this.list.forEach(function (item2, index, array) {
            if (item1 == item2) {
              array.splice(index, 1);
            }
          })
        })
      },
      updateTableDate: function () {
        let _this=this;
        this.formInline.forEach(function (item,index,array) {
          if (item.type==_this.multipleSelection[0].dept_address){
            _this.dialog2.organ.selected=index+1;
          }
        });
        this.list.forEach(function (item,index,array) {
          if(item==_this.multipleSelection[0]){
            _this.selected1=index+1;
       //    console.log(index+1);
          }
        })
       // console.log(this.multipleSelection[0]);
        this.selected1 = this.multipleSelection[0];
        this.dialog2.dialogFormVisible = true;
        this.dialog2.organ.name = this.multipleSelection[0].dept_name;
        this.dialog2.organ.address = this.multipleSelection[0].dept_address;
        this.dialog2.organ.manage = this.multipleSelection[0].superior;
        this.dialog2.organ.peopleCount = this.multipleSelection[0].dept_count;
        this.dialog2.organ.usable = this.multipleSelection[0].isUsed;
      },
      confirmUpdate: function () {
        var _this = this;
      // console.log(_this.multipleSelection[0]);

        this.dialog2.dialogFormVisible = false;

        this.axios({
          url:'http://localhost:3000/api/organ/update',
          method:'get',
          params:{
            dept_name:_this.dialog2.organ.name,
            dept_count:_this.dialog2.organ.peopleCount,
            superior:_this.dialog2.organ.manage,
            isUsed:_this.dialog2.organ.usable,
            dept_address:_this.formInline[_this.dialog2.organ.selected-1].type,
            dept_id:_this.selected1
          }
        }).then(function (res) {
          _this.loadList();
        });
        /*this.list.forEach(function (item, index, array) {
          if (item == _this.selected1) {
            item.name = _this.dialog2.organ.name;
            item.address = _this.formInline[_this.dialog2.organ.selected-1];
            item.manage = _this.dialog2.organ.manage;
            item.usable = _this.dialog2.organ.usable;
            item.peopleCount = _this.dialog2.organ.peopleCount;
          }
        })*/

      }
    }
  }
</script>
<style scoped>

  #showTable {
    position: relative;
    top: 50px;
  }

  input.el-input__inner {
    width: 300px;
  }

  .el-button {
    width: 150px;
  }

  .el-row {
    margin-top: 50px;
  }

  .el-select {
    width: 400px;
  }
</style>
